<template>
    <div class="gal-tag-root">
        <div class="tag-header">
            <div class="select-but" @click="selectBut_ClickEvent">
                <span>开始检索</span>
            </div>
        </div>
        <div class="tag-item-column">
            <input placeholder="检索栏" v-model="inputText" />
        </div>
        <div v-for="(list, key, index) in tagDataList" :key="index" class="tag-item" @click="tagItem_ClickEvent(index)">
            <div class="title">
                <section>{{ key }}</section>
                <div class="but-content tag">
                    <section>{{ curSelectData.filter(u => u.key == key).length }}个</section>
                    <section @click.stop="tagsClear_ClickEvent(key)">清空</section>
                </div>
                <div class="icon">
                    <span :class="curListData[index].isShow ? 'icon-no' : 'icon-off'">></span>
                </div>
            </div>
            <div class="content" :class="curListData[index].isShow ? 'content-no' : 'content-off'"
                @click.stop="() => { }">
                <div v-for="(item, cindex) in list" :data-index="cindex" :key="cindex" class="tag"
                    @click="tag_ClickEvent(key, item.id)"
                    :class="curSelectData.find(u => u.id == item.id) ? 'tag-show' : ''">
                    <span>{{ item.title }}</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useGalStores } from '@/stores/index.js';
import { useRouter } from "vue-router";
import gsap from 'gsap'


const galStores = useGalStores();
const router = useRouter();

const tagDataList = ref([]);
const curListData = ref([
    //
]);//主要管理样式之类的
const curSelectData = ref([
    // { id: 0, key: 'club' }
]);//当前选择的数据
const inputText = ref('');


onMounted(() => {
    galStores.getGalTagListAction().then(res => {
        tagDataList.value = res;

        // 创建样式数据
        let index = 0;
        curListData.value = [];
        for (let item in res) {
            curListData.value.push({
                index: index,
                title: item,
                isShow: false,
            })
            index++;
        }
        // tagItem_ClickEvent(0);//默认打开第一个

        //拿到之前的数据
        curSelectData.value = galStores.getTagSelectDataAction();
    }).catch(res => {
        console.log(res);
    });
})

//清空指定Tag
const tagsClear_ClickEvent = (key) => {
    var liet = tagDataList.value[key];
    var temp = [];
    for (let i = 0; i < curSelectData.value.length; i++) {
        const data = liet.find(u => u.id == curSelectData.value[i].id);
        if (!data) {
            temp.push(curSelectData.value[i])
        }
    }
    curSelectData.value = temp;
}

//检索按钮
const selectBut_ClickEvent = () => {
    if (curSelectData.value.length <= 0 && inputText.value.trim() == "") {
        //清空
        galStores.getGalJsonAction().then(res => {
            router.push({
                path: '/home',
            })
            curSelectData.value = [];
        }).catch(res => {
            console.log(res)
        });
    } else {
        galStores.getGalListOfSelectAction(curSelectData.value, inputText.value).then(res => {
            //如何进行回调
            let id = router.currentRoute.value.query.id;
            if (id) {
                id = Number(id) + 1;
            } else {
                id = 0;
            }
            router.push({
                path: '/home',
                query: { id: id },
            })
        }).catch(res => {
            console.log(res)
        });
    }
}

//tag点击
const tag_ClickEvent = (key, id) => {
    const data = curSelectData.value.find(u => u.id == id);
    if (data) {
        curSelectData.value = curSelectData.value.filter(u => u.id != id);
    } else {
        curSelectData.value.push({ id: id, key: key })
    }
}

//tags菜单点击
const tagItem_ClickEvent = (index) => {
    curListData.value[index].isShow = !curListData.value[index].isShow;
}



</script>

<style scoped lang="scss">
.gal-tag-root {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    overflow-y: auto;
    color: rgba(128, 128, 128, 1);
    border-right: 1px solid rgba(128, 128, 128, 0.5);

    .tag-header {
        height: 50px;
        border-bottom: 1px solid rgba(128, 128, 128, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        position: sticky;
        top: 0;
        z-index: 999;

        .select-but {
            width: 100px;
            height: 30px;
            border-radius: 5px;
            cursor: pointer;
            border: 1px solid rgba(128, 128, 128, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 1);

            >span {
                font-size: 14px;
            }
        }

    }

    .tag-item-column {
        height: 40px;
        border-bottom: 1px solid rgba(128, 128, 128, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;

        >input {
            width: 90%;
            background: rgba(0, 0, 0, 0);
            background: none;
            outline: none;
            border: 0px;
            outline: none;
            font-size: 16px;
            text-align: center;
            padding: 5px 0px;
            border-bottom: 1px solid rgba(128, 128, 128, 0.5);
            color: rgba(128, 128, 128, 1);
        }
    }

    .tag-item {
        .title {
            height: 40px;
            width: 100%;
            display: grid;
            grid-template-columns: 120px 1fr 50px;
            border-bottom: 1px solid rgba(128, 128, 128, 0.5);

            .but-content {
                display: flex;
                justify-content: flex-end;
                align-items: center;

                >section {
                    background: #409eff;
                    color: white;
                    border-radius: 5px;
                    padding: 3px 10px;
                    margin: 4px;
                }
            }

            >section {
                font-weight: 900;
                font-size: 20px;
                line-height: 40px;
                margin-left: 20px;
                color: black;
            }

            .icon {
                display: flex;
                justify-content: center;
                align-items: center;

                >span {
                    font-weight: 900;
                    font-size: 20px;
                    line-height: 40px;
                    transition-duration: 0.3s;
                    color: rgba(128, 128, 128, 0.5);
                }

                .icon-no {
                    transform: rotate(90deg);
                }

                .icon-off {
                    transform: rotate(-90deg);
                }
            }
        }

        .content {
            display: flex;
            flex-wrap: wrap;

            .tag {
                box-shadow: 0 0 10px -3px rgba(0, 0, 0, 0.5);
                border-radius: 5px;
                padding: 3px 10px;
                margin: 4px;
                background: white;
                transition-duration: 0.3s;
            }

            .tag-show {
                background: #409eff;
                color: white;
            }

        }

        .content-no {}

        .content-off {
            display: none;
        }
    }
}
</style>